<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <link rel="stylesheet" href="../dawan/css/common.css"/>
    <link rel="stylesheet" href="../dawan/css/swiper.3.2.0.min.css"/>
    <script src="../dawan/js/swiper.3.2.0.min.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        div,p,span{letter-spacing: 0;}
        body{width: 100%;max-width: 640px;height: 100%;margin: 0 auto;}
        .main{width: 100%;max-width: 640px; height: 100%;position: relative;}
        .position-container{position: relative;top: 60px;bottom: 55px;}
        .header{position: fixed;top: 0;width: 100%; max-width: 640px;height: 60px; background-color: #fe84fb;overflow: hidden;z-index: 2;}
        .header .logo{position: absolute;left: 80px;right: 80px;height: 60px;}
        .header .logo div{width: 60px; height: 60px;margin: 0 auto;
            background-image: url("../dawan/img/logo.png");background-size: 80%;background-repeat: no-repeat;background-position: center;}
        .left-btn{float: left;color: #fff;height: 20px; margin: 20px 0 20px 15px;font-size: 14px;overflow: hidden;}
        .left-btn .city{float: left;line-height: 20px;}
        .left-btn .btn-icon{float: left;width: 24px;height: 20px;
            background-image: url("../dawan/img/down_arrow.png");background-size: 80%;background-repeat: no-repeat;background-position: center;}
        .header .right-btn{position: relative;float: right; width: 20px;height: 20px; margin: 20px 15px 20px 0;
            background-image: url("../dawan/img/map.png");background-size: 80%;background-repeat: no-repeat;background-position: center;}
        .header .right-btn span{display: block;width: 6px;height: 6px; border-radius: 6px; background-color: #FF00A3; position: absolute;top: -3px;right: -3px;}

        .swiper-container{}
        .swiper-slide img{display: block;width: 100%;}
        .swiper-container .swiper-pagination-bullet {width: 8px;height: 8px;display: inline-block;border-radius: 100%;background: #fff;opacity: .5;}
        .swiper-container .swiper-pagination-bullet-active{border-radius: 0 !important; outline: 2px solid #fff;opacity: 1;background-color: transparent;}
        .swiper-pagination2{margin-top: 8px}
        .swiper-container2 .swiper-pagination-bullet {width: 8px;height: 8px;display: inline-block;border-radius: 100%; background: #6a499a; opacity: .5;}
        .swiper-container2 .swiper-pagination-bullet-active{border-radius: 0 !important;outline: 2px solid #6a499a;opacity: 1;background-color: transparent;}

        .btn-group{ margin: 20px 0;overflow: hidden;}
        .btn-group .btn{float: left; width: 25%;text-align: center;}
        .btn-group .btn img{display: block; margin: 0 auto;width: 45px;}
        .btn-group .btn p{text-align: center;margin-top: 8px;font-size: 14px;color: #888;}
        .banner{margin-top: 8px;}
        .banner img{width: 100%;display: block;}

        .title{margin-top: 10px;margin-bottom: 5px;overflow: hidden; color: #fff;font-size: 14px;}
        .title .left{background-color: #ba9eff;float: left;padding: 5px 10px;}
        .title .left span:first-child{margin-left: 5px;}
        .title .left span{width: 8px;height: 8px;margin-left: 3px;
        background-image: url("../dawan/img/whitestar.png");background-position: center;background-repeat: no-repeat;background-size: 100%;}
        .title .right{position: relative;background-color: #6a499a; text-align: center; padding: 5px 20px 5px 15px;float: right; border-top-left-radius: 28px;border-bottom-left-radius: 28px;}
        .title .right span{display: block;width: 8px;height: 8px;border-radius: 8px; background-color: #FF00A3;position: absolute;right: 6px;top: 9px;}

        .carousel{width: 100%;background-color: #f3f3f3;overflow: hidden;padding: 10px 0 3px;}
        .swiper-container2{padding: 0 3px;}
        .swiper-container2 .swiper-slide{background-color: #fff;box-shadow: 0 3px 6px #ececec;}
        .swiper-container2 .swiper-slide img{width: 100%;display: block;}
        .swiper-pagination2{text-align: center;}
        .swiper-pagination2 span{margin: 0 5px;}
        .content{ overflow: hidden;padding: 5px 0;}
        .content .left{ float: left;width: 28px !important;border-radius: 50%;margin: 0 5px;}
        .content .right{float: left;font-size: 11px;}
        .content .right .name{color: #666;font-size: 12px;margin-bottom: 2px;}
        .content .right .flower{color: #f1a552;margin-bottom: 2px;}
        .content .right .talk{color: #999;margin-bottom: 2px;}
        .content .right .star{;margin-bottom: 2px;}
        .content .right .star span{width: 8px;height: 8px;margin-right: 3px;
            background-image: url("../dawan/img/yellowstar.png");background-position: center;background-repeat: no-repeat;background-size: 100%;}
        .content .right .star span:last-child{
            background-image: url("../dawan/img/graystar.png");background-position: center;background-repeat: no-repeat;background-size: 100%;
        }
        .content .right .good-at{color: #999;margin-bottom: 2px;}
        .content .right .eye{color: #999;overflow: hidden;}
        .content .right .eye div{width: 14px;height: 14px;float: left;
            background-image: url("../dawan/img/eye.png");background-repeat: no-repeat;background-size: 80%;background-position: center;}
        .content .right .eye span{float: left;margin-left: 3px;}

        .container{width: 100%;background-color: #f3f3f3;overflow: hidden;padding: 10px 0;}
        .container .item{width: 33.33333%;float: left;margin-bottom: 10px;background-color: #f3f3f3;}
        .container .item .item-box{margin: 0 3px;background-color: #fff;box-shadow: 0 3px 6px #ececec;}
        .container .item .item-box>img{width: 100%;}

        .footer{width: 100%;height: 45px;background-color: #F9F9F9;position: fixed;bottom: 0;max-width: 640px;z-index: 9;}
        .footer .nav-bar{width: 100%;}
        .footer .nav-bar-item{width: 20%;height: 45px;float: left;text-align: center;line-height: 45px;position: relative;}
        .footer .nav-bar-item span{width: 35px;height: 35px;vertical-align: middle;background-size: 55%;background-repeat: no-repeat;background-position: center;}
        .footer .nav-bar-item:nth-child(1) span{background-image: url("../dawan/img/index.png");}
        .footer .nav-bar-item:nth-child(2) span{background-image: url("../dawan/img/circle.png");}
        .footer .nav-bar-item .radar{width: 50px;height: 50px;bottom: 5px;background-image: url("../dawan/img/circleback.png");background-size: cover;position: absolute;
            left: 50%;margin-left: -30px;text-align: center;vertical-align:middle;animation: circle 2s linear infinite;-webkit-animation: circle 2s linear infinite;}
        @keyframes circle {from{transform: rotate(0deg)}to{transform: rotate(360deg)}}
        @-webkit-keyframes circle {from{-webkit-transform: rotate(0deg)}to{-webkit-transform: rotate(360deg)}}
        .footer .nav-bar-item .radar div{width: 40px;height: 40px;margin: 5px auto;position: relative;
            background-image: url("../dawan/img/radar.png");background-size: 90%;background-repeat: no-repeat;background-position: center;}
        .footer .nav-bar-item .radar div img{display: block;width: 50%;position: absolute;left: 50%;top: 19px;}
        .footer .nav-bar-item:nth-child(4) span{background-image: url("../dawan/img/message.png");}
        .footer .nav-bar-item:nth-child(5) span{background-image: url("../dawan/img/mine.png");}
        .bottom{width: 100%;height: 55px;background-color: #f3f3f3;}
    </style>
</head>
<body>
<div class="main">
    <header class="header">
        <div class="left-btn">
            <span class="city">成都</span>
            <span class="btn-icon"></span>
        </div>
        <div class="logo"><div></div></div>
        <div class="right-btn"><span></span></div>
    </header>
    <div class="position-container">
    <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../dawan/img/banner.png"/></div>
                <div class="swiper-slide"><img src="../dawan/img/banner.png"/></div>
                <div class="swiper-slide"><img src="../dawan/img/banner.png"/></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    <div class="btn-group">
        <div class="btn">
            <img src="../dawan/img/order.png" alt=""/>
            <p>预约</p>
        </div>
        <div class="btn">
            <img src="../dawan/img/prient.png" alt=""/>
            <p>冲印</p>
        </div>
        <div class="btn">
            <img src="../dawan/img/need.png" alt=""/>
            <p>需求</p>
        </div>
        <div class="btn">
            <img src="../dawan/img/activity.png" alt=""/>
            <p>活动</p>
        </div>
    </div>
    <div class="banner"><img src="../dawan/img/banner1.png"/></div>
    <div class="title">
        <div class="left">推荐大腕—TOP10</div>
        <div class="right">更多<span></span></div>
    </div>
    <div class="carousel">
        <div class="swiper-container2">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../dawan/img/img1.png"/>
                    <div class="content">
                        <img class="left" src="../dawan/img/img3.png" alt=""/>
                        <div class="right">
                            <div class="name">周杰伦</div>
                            <div class="flower">鲜花:<span>4512</span></div>
                            <div class="talk">评论:<span>255</span></div>
                            <div class="eye">
                                <div></div><span>4531</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="../dawan/img/img2.png"/>
                    <div class="content">
                        <img class="left" src="../dawan/img/img3.png" alt=""/>
                        <div class="right">
                            <div class="name">周杰伦</div>
                            <div class="flower">鲜花:<span>4512</span></div>
                            <div class="talk">评论:<span>255</span></div>
                            <div class="eye">
                                <div></div><span>4531</span>
                            </div>
                        </div>
                    </div></div>
                <div class="swiper-slide">
                    <img src="../dawan/img/img3.png"/>
                    <div class="content">
                        <img class="left" src="../dawan/img/img3.png" alt=""/>
                        <div class="right">
                            <div class="name">周杰伦</div>
                            <div class="flower">鲜花:<span>4512</span></div>
                            <div class="talk">评论:<span>255</span></div>
                            <div class="eye">
                                <div></div><span>4531</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="../dawan/img/img1.png"/>
                    <div class="content">
                        <img class="left" src="../dawan/img/img3.png" alt=""/>
                        <div class="right">
                            <div class="name">周杰伦</div>
                            <div class="flower">鲜花:<span>4512</span></div>
                            <div class="talk">评论:<span>255</span></div>
                            <div class="eye">
                                <div></div><span>4531</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="../dawan/img/img2.png"/>
                    <div class="content">
                        <img class="left" src="../dawan/img/img3.png" alt=""/>
                        <div class="right">
                            <div class="name">周杰伦</div>
                            <div class="flower">鲜花:<span>4512</span></div>
                            <div class="talk">评论:<span>255</span></div>
                            <div class="eye">
                                <div></div><span>4531</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <img src="../dawan/img/img3.png"/>
                    <div class="content">
                        <img class="left" src="../dawan/img/img3.png" alt=""/>
                        <div class="right">
                            <div class="name">周杰伦</div>
                            <div class="flower">鲜花:<span>4512</span></div>
                            <div class="talk">评论:<span>255</span></div>
                            <div class="eye">
                                <div></div><span>4531</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination2"></div>
        </div>
    </div>
    <div class="banner"><img src="../dawan/img/banner2.png"/></div>
    <div class="title">
        <div class="left">摄影师<span></span><span></span><span></span><span></span></div>
        <div class="right">更多<span></span></div>
    </div>
    <div class="container">
        <div class="item">
            <div class="item-box">
            <img src="../dawan/img/img1.png"/>
            <div class="content">
                <img class="left" src="../dawan/img/img2.png" alt=""/>
                <div class="right">
                    <div class="name">周杰伦</div>
                    <div class="star"><span></span><span></span><span></span><span></span><span></span></div>
                    <div class="good-at">擅长:<span>255</span></div>
                    <div class="eye">
                        <div></div><span>4531</span>
                    </div>
                </div>
            </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <img src="../dawan/img/img2.png"/>
                <div class="content">
                    <img class="left" src="../dawan/img/img2.png" alt=""/>
                    <div class="right">
                        <div class="name">周杰伦</div>
                        <div class="star"><span></span><span></span><span></span><span></span><span></span></div>
                        <div class="good-at">擅长:<span>255</span></div>
                        <div class="eye">
                            <div></div><span>4531</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <img src="../dawan/img/img1.png"/>
                <div class="content">
                    <img class="left" src="../dawan/img/img3.png" alt=""/>
                    <div class="right">
                        <div class="name">周杰伦</div>
                        <div class="star"><span></span><span></span><span></span><span></span><span></span></div>
                        <div class="good-at">擅长:<span>255</span></div>
                        <div class="eye">
                            <div></div><span>4531</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <img src="../dawan/img/img3.png"/>
                <div class="content">
                    <img class="left" src="../dawan/img/img1.png" alt=""/>
                    <div class="right">
                        <div class="name">周杰伦</div>
                        <div class="star"><span></span><span></span><span></span><span></span><span></span></div>
                        <div class="good-at">擅长:<span>255</span></div>
                        <div class="eye">
                            <div></div><span>4531</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <img src="../dawan/img/img1.png"/>
                <div class="content">
                    <img class="left" src="../dawan/img/img2.png" alt=""/>
                    <div class="right">
                        <div class="name">周杰伦</div>
                        <div class="star"><span></span><span></span><span></span><span></span><span></span></div>
                        <div class="good-at">擅长:<span>255</span></div>
                        <div class="eye">
                            <div></div><span>4531</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="item-box">
                <img src="../dawan/img/img2.png"/>
                <div class="content">
                    <img class="left" src="../dawan/img/img3.png" alt=""/>
                    <div class="right">
                        <div class="name">周杰伦</div>
                        <div class="star"><span></span><span></span><span></span><span></span><span></span></div>
                        <div class="good-at">擅长:<span>255</span></div>
                        <div class="eye">
                            <div></div><span>4531</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="bottom"></div>
    </div>
    <footer class="footer">
        <div class="nav-bar">
            <div class="nav-bar-item">
                <span></span>
            </div>
            <div class="nav-bar-item">
                <span></span>
            </div>
            <div class="nav-bar-item">
                <div class="radar">
                    <div>
                        <img src="../dawan/img/radarpoint.png"/>
                    </div>
                </div>
            </div>
            <div class="nav-bar-item">
                <span></span>
            </div>
            <div class="nav-bar-item">
                <span></span>
            </div>
        </div>
    </footer>
</div>
<script>

    var mySwiper = new Swiper ('.swiper-container',{
        loop: true,
        // 如果需要分页器
        pagination: '.swiper-pagination'
    });

    var mySwiper2 = new Swiper('.swiper-container2', {
//        loop:'loop',
        pagination: '.swiper-pagination2',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 6
    });

</script>
</body>
</html>